<template>
    <require from="./em-chat-sidebar-right.css"></require>
    <div class="tms-right-sidebar em-chat-sidebar-right">
        <div class="tms-header">
            <h2 class="ui header">
              <i class="${actived.icon} icon" style="font-size: 1em;"></i>
              <div class="content">
                ${isAt && actived.titleAt ? actived.titleAt : actived.title}
              </div>
            </h2>
            <i click.delegate="closeHandler()" title="关闭右侧边栏" class="large grey link close icon"></i>
        </div>
        <div ref="scrollbarRef" class="tms-scroll-wrapper" scrollbar="scrollbar-macosx">
            <em-chat-msg login-user.bind="loginUser" is-at.bind="isAt" channel.bind="channel" actived.bind="actived"></em-chat-msg>
            <div ref="dirRef" show.bind="actived.show == 'dir'" class="panel-wiki-dir"></div>
            <div ref="attachRef" show.bind="actived.show == 'attach'" class="panel-chat-attach">
                <em-chat-attach view-model.ref="chatAttachVm"></em-chat-attach>
            </div>
            <div ref="scheduleRef" show.bind="actived.show == 'schedule'" class="panel-chat-schedule">
                <em-chat-schedule login-user.bind="loginUser" view-model.ref="chatScheduleVm"></em-chat-schedule>
            </div>
            <em-chat-topic view-model.ref="chatTopicVm" name="chat" actived.bind="actived" channel.bind="channel">
            </em-chat-topic>
            <em-chat-todo actived.bind="actived"></em-chat-todo>
        </div>
    </div>
    <em-confirm-modal em-confirm-modal.ref="emConfirmModal"></em-confirm-modal>
</template>
